<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 设置文档的字符编码为UTF-8 -->
    <title>SSE Counter</title>
    <!-- 设置页面标题 -->
</head>
<body>
    <h1>Counter:</h1>
    <!-- 显示计数器标题 -->
    <p id="counter">0</p>
    <!-- 显示计数器数值，初始值设置为0 -->

    <script type="text/javascript">
        // 检查浏览器是否支持Server-Sent Events (SSE)
        if(typeof(EventSource)!=="undefined") {
            // 创建一个新的EventSource对象，连接到服务器端点"/events"
            var source = new EventSource("/events");

            // 当从服务器接收到消息时触发此函数
            source.onmessage = function(event) {
                // 更新页面中ID为"counter"的<p>元素的内容为接收到的消息数据
                document.getElementById("counter").innerHTML = event.data;
            };

            // 如果发生错误（例如连接断开），触发此函数
            source.onerror = function(event) {
                console.error("Error occurred:", event);
                // 可选：关闭事件源以防止进一步尝试重新连接
                // source.close();
            };
        } else {
            // 如果浏览器不支持SSE，则显示提示信息
            document.getElementById("counter").innerHTML = "Sorry, your browser does not support server-sent events.";
        }
    </script>
    <!-- 该脚本块用于与服务器建立SSE连接，并根据接收的数据更新页面上的计数器 -->
</body>
</html>